<template>
  <div>
    <!--  title 对话框的标题
        visible 接收一个布尔值  为true时显示对话框
        before-close 关闭对话框前的一个回调
      -->
    <el-dialog
      :title=" title +'部门'"
      :visible="addDialogVisible"
      @close="closeDialog"
    >
      <!-- 添加的表单  :model="form" 关联表单数据 :rules 校验规则属性-->
      <el-form ref="addForm" label-width="120px" :model="form" :rules="addFormRules">
        <!-- 校验规则生效el-form-item 必须加 prop -->
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
        </el-form-item>
        <el-form-item prop="code" label="部门编码">
          <el-input v-model="form.code" :disabled="isDisabled" style="width:80%" placeholder="1-50个字符" />
        </el-form-item>
        <el-form-item prop="manager" label="部门负责人">
          <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
            <!-- label是展示给用户看的  value是双向绑定同步给v-model值的 -->
            <el-option v-for="item in simpleList" :key="item.id" :value="item.username" :label="item.username" />
          </el-select>
        </el-form-item>
        <el-form-item prop="introduce" label="部门介绍">
          <el-input v-model="form.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="addDept">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { reqGetSimplePeopleList } from '@/api/employee'
import { reqAddDept, reqGetDeptInfo, reqUpdateDept } from '@/api/departments'
export default {
  name: 'AddDept',
  props: {
    addDialogVisible: {
      type: Boolean,
      required: true
    },
    nodeData: {
      type: Object,
      required: true
    },
    // 部门列表源数据
    souceDepts: {
      type: Array,
      required: true
    }
  },
  data() {
    // 方式一 需要去修改 utils工具函数的if分支
    /* const checkNameRepeat = (rule, value, cb) => {
      // value是输入的值
      // 将当前点击的部门的所有子部门拿到(数组) 比对
      // console.log(this.nodeData.children) // 同级部门的数组
      const boo = this.nodeData.children.some(item => item.name === value)
      // console.log(boo)
      boo ? cb(new Error(`${value}部门已存在`)) : cb()
    } */
    const checkNameRepeat = (rule, value, cb) => {
      // 如果是编辑状态, 允许不校验你的部门名称与自己重复
      if (this.form.id && value === this.nodeData.name) {
        cb()
        return
      }
      let arr = []
      // 如果是编辑状态下,我们要找兄弟部门,编辑的部门名称和兄弟部门名称不能重复
      if (this.form.id) {
        arr = this.souceDepts.filter(item => item.pid === this.nodeData.pid)
      } else {
        // console.log(this.nodeData.id) // 拿着这个id找部门pid是这个id的部门
        arr = this.souceDepts.filter(item => item.pid === this.nodeData.id) //
      }
      // 将当前点击的部门的所有子部门拿到(数组) 比对
      // 找子部门
      // console.log(arr)
      const boo = arr.some(item => item.name === value)
      boo ? cb(new Error(`${value}部门已存在`)) : cb()
    }
    // 部门编码的自定义校验规则
    const checkCodeRepeat = (rule, value, cb) => {
      // 如果是编辑状态下,允许部门不编码
      if (this.form.id && value === this.nodeData.code) {
        cb()
        return
      }
      // 输入的部门编码不能与所有的数据的code重复
      this.souceDepts.some(item => item.code === value) ? cb(new Error(`${value}部门编码已存在`)) : cb()
    }
    return {
      // 添加的表单数据
      form: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门负责人
        introduce: '' // 部门介绍
      },
      //  表单的校验规则
      addFormRules: {
        // 部门名称的校验规则
        name: [
          { required: true, message: '请输入部门名称', trigger: ['blur', 'change'] },
          { min: 2, max: 10, message: '部门名称不能超过10个字符', trigger: ['blur', 'change'] },
          // 自定义校验同级部门部门名称不能重复
          { validator: checkNameRepeat, trigger: 'blur' }
        ],
        // 部门编码校验规则
        code: [
          { required: true, message: '请输入部门编码', trigger: ['blur', 'change'] },
          { min: 2, max: 10, message: '部门编码不能超过10个字符', trigger: ['blur', 'change'] },
          // 自定义校验部门编码 - 所有部门编码不能重复
          { validator: checkCodeRepeat, trigger: 'blur' }
        ],
        // 部门负责人校验规则
        manager: [
          { required: true, message: '请选择部门负责人', trigger: 'change' }
        ],
        // 部门介绍的校验规则
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: ['blur', 'change'] },
          { min: 1, max: 300, message: '部门介绍不能超过300个字符', trigger: ['blur', 'change'] }
        ]
      },
      // 部门负责人列表数据
      simpleList: []
    }
  },
  computed: {
    title() {
      return this.form.id ? '编辑' : '添加'
    },
    isDisabled() {
      // return  this.form.id ? true :false
      return !!this.form.id
    }
  },
  created() {
    // console.log('获取部门负责人列表')
  },
  methods: {
    // 为对话框绑定close事件监听对话框的关闭
    closeDialog() {
      // 在重置之前将form手动清空
      this.form = {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门负责人
        introduce: '' // 部门介绍
      }
      // 重置表单数据和校验规则 resetFields() 重置只会重置关联给form的字段
      this.$refs.addForm.resetFields()
      // 通知父组件关闭对话框
      // this.$emit('close-dialog')
      this.$emit('update:addDialogVisible', false)
    },
    // 获取简单员工列表数据
    async getSimpleList() {
      const { data } = await reqGetSimplePeopleList()
      this.simpleList = data
    },
    // 添加/编辑部门
    addDept() {
      // 发送请求之前做一次表单的预校验, 表单上有一个方法 validate
      this.$refs.addForm.validate(async boo => { // 参数返回一个布尔值, 如果校验都通过结果为true,反之就是false
        if (!boo) return this.$message.warning('请按照规则填写部门信息')
        // 改造这个方法, 如果是处理编辑状态下走编辑的业务逻辑,反之就走新增的业务逻辑
        if (this.form.id) {
          // 1. 发送请求编辑部门
          const { message, success } = await reqUpdateDept(this.form)
          // 2. 提示用户
          if (success) {
            this.$message.success(message)
          }
          // 3. 通知父组件关闭对话框
          // 4. 重新渲染列表
        } else {
          // 1. 发送请求添加部门
          const { message, success } = await reqAddDept({ ...this.form, pid: this.nodeData.id })
          if (success) {
            this.$message.success(message)
          }
        }
        // 2. 提示用户
        // 3. 通知父组件关闭对话框
        this.closeDialog()
        // 4. 重新渲染列表
        this.$emit('reload')
      })
    },
    // 获取部门详情
    async getDeptInfo(id) {
      const { data } = await reqGetDeptInfo(id)
      // console.log(res)
      this.form = data // 将查询回来的部门信息赋值给form对象
    }
  }

}
</script>

<style>

</style>
